const { createApp } = Vue;
const App = {
    data() {
        return {
            roles: [],
            installedRoles: [],
            categories: [],
            hover: 0,
            category: '',
            keyword: '',
            display: 'all', // all installed notInstalled
            sort: 'hot' // hot new
        }
    },
    computed: {
        filteredRoles() {
            return this.roles.filter( ( item ) => {
                return ( this.display === 'all' || ( this.display === 'installed' && this.installed( item.roleId ) ) || ( this.display === 'notInstalled' && !this.installed( item.roleId ) ) ) &&
                    ( !this.category || ( item.category && item.category.includes( this.category ) ) ) &&
                    ( !this.keyword || ( item.name.includes( this.keyword ) || ( item.desc && item.desc.includes( this.keyword ) ) ) );
            } ).sort( ( a, b ) => {
                return this.sort === "hot" ? ( b.installed || 0 ) - ( a.installed || 0 ) : b.roleId - a.roleId;
            } );
        }
    },
    mounted() {
        this.loadRoles();
        this.loadInstalledRoles();
        this.loadCategories();
    },
    methods: {
        loadRoles() {
            $.ajax( {
                url: "/app/ai/roles?type=all",
                success: ( res ) => {
                    if ( res.code ) {
                        return alert( res.msg );
                    }
                    this.roles = res.data;
                }
            } );
        },
        loadCategories() {
            $.ajax( {
                url: "/app/ai/setting/categories",
                success: ( res ) => {
                    if ( res.code ) {
                        return alert( res.msg );
                    }
                    for ( let category of res.data ) {
                        this.categories.push( category.value );
                    }
                }
            } );
        },
        loadInstalledRoles() {
            const data = JSON.parse( localStorage.getItem( "ai.data" ) || "{}" );
            this.installedRoles = data.roleList || [];
        },
        install( roleId ) {
            const role = this.roles.find( ( role ) => role.roleId === roleId );
            if ( role ) {
                window.parent.ai.saveRole( role );
                this.loadInstalledRoles();
                $.ajax( {
                    url: "/app/ai/roles/installed",
                    data: {
                        roleId
                    },
                    type: "post"
                } );
            }
        },
        installAndSwitch( roleId ) {
            this.install( roleId );
            window.parent.ai.switchRoleId( roleId );
            window.parent.ai.switchModule( 'chat' );
        },
        uninstall( roleId ) {
            window.parent.ai.deleteRole( roleId );
            this.loadInstalledRoles();
        },
        installed( roleId ) {
            return this.installedRoles.find( ( role ) => !role.deleted && role.roleId === roleId );
        }
    }
}
Vue.createApp( App ).mount( '#market' );

$( document ).click( function () {
    try {
        window.parent.ai.hideAll();
    } catch ( e ) {}
} );